@import url("base.css");

#top{
	width: 100%;
	height: 100px;
	/*background: deepskyblue;*/
	position: absolute;
	top: 0;
	left: 0;
	z-index: 99;
}
.container{
	width: 1000px;
	height: 100%;
	margin: 0 auto;
	position: relative;
/*	border: 1px solid #000000;*/
	z-index: 1;
}
.yun1{
	position: absolute;
	left: 400px;
	top:50px;
	z-index: 1;
	animation:fly 20s linear 0s infinite alternate;
}
.yun2{
	position: absolute; top: 20px;left: 0px;
	animation:fly 20s linear 0s infinite alternate;
}
.yun3{
	position: absolute; top: 0px;left: -200px;
	animation:fly 20s linear 0s infinite alternate;
}
@keyframes fly{
	from{
		transform:translateX(0px);
	}
	to{
		 transform:translateX(-1200px);
	}
}
.fj{
	position: absolute;
	left: 400px;
	top:80px;
	z-index: 1;
	animation: dei 3s ease-in-out infinite alternate;
}
@keyframes dei{
	from{
		transform: translateY(0);
	}
	to{
		transform: translateY(20px);
	}
}
.chuang{
	position: absolute;
	left: 140px;
	bottom:100px;
	z-index: 1;	
}
#active .chuang{
	animation: dong 1s linear forwards 1;
}
@keyframes dong{
	from{
		left: 140px;
	}
	to{
		left: 180px;
	}
}
.zi{
	position: absolute;
	left: 60px;
	top:100px;
	z-index: 1;
}
.anniu{
	position: absolute;
	left: 50%;
	margin-left: -15px;
	bottom: 50px;
	z-index: 99;
	animation: down 1s linear infinite alternate;
}
@keyframes down{
	from{
		transform: translateY(0);
		opacity: 0;
	}
	to{
		transform: translateY(20px);
		opacity: 1;
	}
}
.container .right{
	position: absolute;
	right: 0;
	top: 200px;
	z-index: 10;
}
.zil{
	position: absolute;
	top: 220px;
	left: 40px;
	animation: zhuan 1.5s linear forwards infinite ;
}
.zir{
	position: absolute;
	top: 130px;
	right: 0px;
	z-index: 10;
}
#active .zir{
	animation: you .8s linear forwards 1 ;
	transform-style: preserve-3d;
}
.text{
	position: absolute;
	top: 220px;
	left: 150px;
	z-index: 10;	
}
#active .text{
	animation: zuo .8s linear forwards 1;	
}
#active .dong1{
	animation: run .8s linear forwards 1;
}
@keyframes run{
	from{
		transform: translateX(-30px);
	}
	to{
		transform: translateX(0px);
	}
}
@keyframes zuo{
	from{
		transform: translateX(-10px);
		opacity: 0;
	}
	to{
		transform: translateX(0px) ;
		opacity: 1;
	}
}
@keyframes you{
	from{
		right:0px;
		opacity: 0;
	}
	to{
		right:40px;
		opacity: 1;
	}
}
@keyframes zhuan{
	from{
		
		transform: rotateY(0deg);
	}
	40%{
		transform: rotateY(0deg);
		
	}
	to{
		transform: rotateY(360deg);
		
	}
}
.text h4{
	font-size: 34px;
    font-weight: 400;
    letter-spacing: 2px;
    line-height: 48px;
    margin-bottom: 6px;
    color: #FFFFFF;
}
.text p{
	font-size: 19px;
    letter-spacing: 1px;
    line-height: 32px;
    opacity: .8;
    color: #FFFFFF;	
}
